<template>
  <div class="app-container">
    <div>
      <el-row :gutter="10">
        <el-col :span="6" :xs="24" :lg="24">
          <div class="bgwhite plr20 ptb20 radius10 flex-col">
            <div class="justify-between w100p">
              <div class="clr3c4 bold ft26">{{ formLabelAlign.type == 'add' ? '新增' : '编辑' }}</div>
              <div class="clr9fa align-center pointer" @click="back()">
                <el-icon>
                  <Back />
                </el-icon>
                返回上一頁
              </div>
            </div>
            <div class="mt40">
              <template v-if="formLabelAlign.type == 'edit'">
                <el-form :label-position="labelPosition" label-width="auto" :model="formLabelAlign" style="max-width: 600px">
                  <el-form-item label="序號:">
                    <el-input v-model="formLabelAlign.id" disabled style="width: 380px;" placeholder="請輸入用戶名" />
                  </el-form-item>
                  <el-form-item label="分類名稱:" required>
                    <el-input v-model="formLabelAlign.name" style="width: 380px;" placeholder="請輸入用戶名" />
                  </el-form-item>
                  <el-form-item label="最低價格(小時):" required>
                    <el-input v-model="formLabelAlign.min_price" placeholder="請輸入最低價格" />
                  </el-form-item>
                  <el-form-item label="最高價格(小時):">
                    <el-input v-model="formLabelAlign.max_price" placeholder="請輸入最高價格" />
                  </el-form-item>
                  <el-form-item label="分類Logo:">
                    <el-upload v-model:file-list="fileList" :action="$upUrl" list-type="picture-card" :headers="headers" name="images" :on-success="onSuccess" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                      <div class="uploader flex-cen" v-if="fileList.length == 0">
                        <el-icon size="60" style="color: #3a3f63;">
                          <Picture />
                        </el-icon>
                      </div>
                      <el-button class="btn2 ml20">選擇文件</el-button>
                    </el-upload>
                    <el-dialog v-model="dialogVisible">
                      <img w-full :src="dialogImageUrl" alt="Preview Image" />
                    </el-dialog>
                  </el-form-item>
                  <el-form-item label="創建時間">
                    <el-input v-model="formLabelAlign.created_at" disabled style="width: 380px;" placeholder="請輸入用戶名" />
                  </el-form-item>
                  <el-form-item label="更新時間">
                    <el-input v-model="formLabelAlign.updated_at" disabled style="width: 380px;" placeholder="請輸入用戶名" />
                  </el-form-item>
                </el-form>
              </template>



              <div class="mt40 mb15 flex-cen ">
                <div class="align-center">
                  <el-button class="btn1" @click="reset()">重置</el-button>
                  <el-button class="btn2" @click="submit()">提交</el-button>
                </div>

              </div>
            </div>


          </div>
        </el-col>


      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router';
import { baseURL, headers } from '@/utils/utils';
import { editClassify } from '@/api/player';
import type { FormProps } from 'element-plus';


onMounted(() => {
  formLabelAlign.type = route.query.type
  if (route.query.type == 'edit') {
    console.log('数据---', route.query)
    formLabelAlign.id = `${route.query.id}`
    formLabelAlign.name = `${route.query.name}`
    formLabelAlign.min_price = `${route.query.min_price}`
    formLabelAlign.max_price = `${route.query.max_price}`
    formLabelAlign.created_at = `${route.query.created_at}`
    formLabelAlign.updated_at = `${route.query.updated_at}`

  }
  let file = [
    {
      name: 'logo',
      url: `${route.query.logo}`
    }
  ]
  fileList.value = file
  console.log('图片', fileList.value)
})
const handleRemove = () => {
  fileList.value = []
}
const onSuccess = (res) => {
  console.log('上传成功', res)
  let path = res.data[0].path
  let fullpath = `${baseURL}${path}`
  console.log('完整路径', fullpath)
  let file = [
    {
      name: 'logo',
      url: fullpath
    }
  ]
  fileList.value = file
  console.log(fileList.value)

}
const route = useRoute()
const labelPosition = ref<FormProps['labelPosition']>('right')

const fileList = ref([
  {
    name: 'level',
    url: '',
  },
])

const dialogImageUrl = ref('')
const dialogVisible = ref(false)



const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!
  dialogVisible.value = true
}

const formLabelAlign = reactive({
  classifyInfo: {},
  type: '',
  id: '',
  name: '',
  min_price: '',
  max_price: '',
  created_at: '',
  updated_at: ''
})
const reset = () => {
  formLabelAlign.name = ''
  formLabelAlign.min_price = ''
  formLabelAlign.max_price = ''
  fileList.value = []
}
const submit = () => {
  editClassify({
    id: formLabelAlign.id,
    name: formLabelAlign.name,
    min_price: formLabelAlign.min_price,
    max_price: formLabelAlign.max_price,
    logo: fileList.value.length ? fileList.value[0].url : ''
  }).then((res) => {
    console.log('编辑成功', res)
    router.back()
  })
}
const router = useRouter()
const back = () => {
  router.back()
}
</script>
<style scoped >
:deep(.el-upload--picture-card) {
  background-color: transparent;
  border: none;

}

:deep(.el-input) {
  box-shadow: none;
}
</style>